
<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" href="../favicon.ico">
    <meta property="og:title" content="博客页">
    <meta property="og:site_name" content="WinSonZhao ©博客(BLOG)-">
    <title>WinSonZhao ©博客(BLOG)-情人节</title>
	<!--<link rel="stylesheet" type="text/css" charset="UTF-8" id="global_link" href="css/theme_1.css">-->
	<!--prism 代码高亮-->
	<!--<link rel="stylesheet" type="text/css" charset="UTF-8" href="../js/prism/prism.css">-->
<style type="text/css" charset="UTF-8">
/*页面样式*/
@font-face {
	font-family: 'Regular';
	font-style: normal;
	font-weight: 400;
	src: local('Rye Regular'), local('Rye-Regular'), url('../fonts/RyeRegular.ttf') format('woff');
}
/*背景设置---*/
*{
    margin: 0;
    padding:0;
}
body{
    width:100%;
    background-color: #ffc5b3;
	background:url('../img/jinian.jpg') no-repeat;
	background-size: cover;
	background-repeat: repeat-x;
    font-family: "Regular", Georgia, sans-serif;
}
@media screen and (max-aspect-ratio:4/3){/*页面可见宽度与高度比率*/
	body{
		width:100%;
		background-color: #ffc5b3;
		background:url('../img/jinian-shu.png') no-repeat;
		background-size: cover;
		background-repeat: repeat-y;
		font-family: "Regular", Georgia, sans-serif;
	}
}
/*心形*/
.heart{
    width:150px;
    height:150px;
    background-color:#cc2a5d;
    margin:100px auto;
    position: relative;
    transform: rotate(45deg);
    animation: heart 1s ease-in infinite;
}
.heart::before,
.heart::after{
    content:'';
    width:100%;
    height:100%;
    background-color:#cc2a5d;
    border-radius: 50%;
}
.heart::before{
    position: absolute;
    top:0;
    left:0;
    transform: translateX(-50%);
}
.heart::after{
    position: absolute;
    top:0;
    left:0;
    transform: translateY(-50%);
}
/*心中文字*/
.heart span{
	font-size: 4em;
	z-index: 9999;
	position: absolute;
	transform: rotate(-45deg);
}
@keyframes heart{
    0%{
        transform: scale(0.8) rotate(45deg);
        opacity: 0.8;
    }
    50%{
        transform: scale(1) rotate(45deg);
        opacity: 1;
    }
    100%{
        transform: scale(0.8) rotate(45deg);
        opacity: 0.8;
    }
}
/*心形背景*/
.textCon{
	width: 90%;
    margin:10px auto;
    position: relative;
    font-size: 2em;
	color: #f44336;
    background: rgba(169, 220, 166, 0.5);
}
/*打字机-光标闪烁动画*/
.typerTarget{
	border-right: 1px solid #000;
	animation: blink-caret 1s step-end infinite alternate;
}
/* 底部信息- */
.footer{
	text-align: center;
	position: absolute;
	bottom: 0;
	width: 98%;
}
.footer p{
	font-size: 0.9em;
	margin: 0;
	color: #e91e63
}
</style>
</head>
<body>
	<noscript>
		<h3>您的浏览器不支持/未启用 JavaScript!(JavaScript is not supported / enabled in your browser)!</h3>
	</noscript>

	<!--心形背景-->
	<canvas style="display: block;position:absolute;" width="10" height="10">Canvas is not supported in your browser</canvas>
	<!--心形-->
	<div class="heart" style="display:none"><span>敬敬</span></div>
	<div class="textCon" >
		<div id="text_title"> </div>
		<div id="text_content" style="margin-left: 2em;">
		</div>
		<div id="text_bottom"> </div>
    </div>
	<div class="footer">
        <p  ><!--Minimalist style 极简风格-->
			© 2016-2020 欢迎光临。保留所有权利。(Welcome to visit. All rights reserved.)
        </p>
    </div>
	<img id="heart_back" style="display: none;" src="" />

	<!--<script src="" type="text/javascript" charset="UTF-8"></script>-->
	<script src="../js/jquery/jquery.min.js"></script>
	<script src="../js/chenjing/yunTyper.js"></script>
	<script src="../js/chenjing/heartBack.js"></script>
	<script type="text/javascript" charset="UTF-8">
		//计时器
		var arr = "2018-4-17 00:00:00".split(/[- :]/);//改这里
		var start_time = new Date(arr[0], arr[1]-1, arr[2], arr[3], arr[4], arr[5]);
		function timer_start(){
			var duration = parseInt(new Date()- start_time)/1000;
			var seconds = parseInt( duration % 60);
			if (seconds < 10)
				seconds = "0" + seconds;
			duration = parseInt(duration / 60);
			var minutes = duration % 60;
			if (minutes < 10)
				minutes = "0" + minutes;
			duration = parseInt(duration / 60);
			var hours = duration % 24;
			if (hours < 10)
				hours = "0" + hours;
			duration = parseInt(duration / 24);
			var days = duration;
			return days+' 天 '+ hours + " 时 " + minutes + " 分 " + seconds + " 秒 ";
		}
		function typer_(id,text,fn){
			$(id).yunTyper({
				text : text,
				loop : false,
				color : "#f44336",//字体和光标颜色
				speed : 100,//打字速度
				sleep : 1000,//回退停顿时间
				endFn : fn
			});
		}
		window.onload = function(){
			var txts = {
				'text-1':`Dear ChenJing:`,
				'text-2':` love me little and love me long. 不求情意绵绵，但求天长地久。`,
				'text-4':`祝亲爱的宝贝，节日快乐！！！`,
				'text-5':`很抱歉，这个礼物有点迟到。`,
				'text-6':`这个页面是我这两天才想起来弄得，可能有点不好看。`,
				'text-7':`结尾的计时器,将永远继续下去,直至永远。`,
				'text-8':`我愿执子之手,与子偕老。爱你一生一世。`,
				'text-9':`----Only love you, ZhaoYunLiang`,
				'text-10':`-2020/02/14-`,
				'text-3':timer_start(),
			}
			var txt = [
				`love me little and love me long. 不求情意绵绵，但求天长地久。`,
				'祝亲爱的宝贝，节日快乐！！！',
				'很抱歉，这个礼物有点迟到。',
				'这个页面是我这两天才想起来弄得，可能有点不好看。',
				'结尾的计时器,将永远继续下去,直至永远。',
				'我愿执子之手,与子偕老。爱你一生一世。',
				'----Only love you, ZhaoYunLiang',
				'----2020/02/14-----',
			];
			typer_('#text_title',['Dear ChenJing:'],function(){
				typer_('#text_content',txt,function(){
					typer_('#text_bottom',[timer_start()],function(){
						window.setInterval(function(){
							$('#text_bottom span').html(timer_start());
						},1000);
						var heart_ = new heartBack({
							selector : 'canvas',//默认
							aim_selector : '#heart_back',//漂浮的元素
							aim_width : 50,//元素宽
							aim_height : 50,//元素高
							aim_count : 10,//元素个数
							is_scale : true ,//是否缩放
							is_rotate : false ,//是否旋转 
							up_down : false //方向，上下
						});
						heart_.start();
						$('.heart').removeAttr('style');
					})
				})
			})
			/* Typewriter(txts,50,1000,function(){
				window.setInterval(function(){
					$('#text-3').html(timer_start());
				},1000);
			}) */
		}

	    //当前页面存在iframe中，强制跳转
		if(window.self !== window.top || top.location.href !== self.location.href){
		//    top.location.href = self.location.href;
			alert('本页面被嵌套在iframe中(This page is nested in iframe)!');
		}
	</script>
</body>
</html>